function DisplayBlock(id,data,relate,index) {

// set the svg and other parameters for drawing synteny genes
	var svg = d3.select(id),
		margin = { left:150, right:200, top:100, bottom:100},
		wsvg  = +svg.attr("height"),
		hsvg  = +svg.attr("width"),
		width = +svg.attr("height") - margin.top - margin.bottom,
		height = +svg.attr("width") - margin.left - margin.right;
	svg =	svg.append("g").attr("transform","translate(100,500)rotate(270)");


	let scale_A = d3.scaleLinear().domain([data.A.min, data.A.max]).range([margin.top, margin.top + height]);
	let scalerA = d3.scaleLinear().domain([margin.top, margin.top + height]).range([data.A.min, data.A.max]);
	let scale_B = d3.scaleLinear().domain([data.B.min, data.B.max]).range([margin.top, margin.top + height]);
	let scalerB = d3.scaleLinear().domain([margin.top, margin.top + height]).range([data.B.min, data.B.max]);

	//var yAxis = d3.axisLeft(scale_A);

	var chrWidth = 20;			// width of chromosome
	var chrHeight = height;		// height of chromosome
	var spaceBetweenChr = 220;	// distance between two chromosomes
	var txtToChr = 5;			// distance of text to chromosome
	var pro = (data.B.max-data.B.min)/(data.A.max-data.A.min);
	if(pro > 70){
		pro = 30
	}

	// the related include the path for synteny links
	let relateD = relate.map(function(d){
        let _d = [];
        _d.push([margin.left + chrWidth,data.A.rect[d[0]-1][1]]);
        _d.push([margin.left + spaceBetweenChr,data.B.rect[d[1]-1][1]]);
        _d.push([margin.left + spaceBetweenChr,data.B.rect[d[1]-1][2]]);
        _d.push([margin.left + chrWidth,data.A.rect[d[0]-1][2]]);
        return _d;
    });

	// for cover the images out of border when zoom
	svg.append("defs").append("clipPath")
    	.attr("id", "clip")
  		.append("rect")
		.attr('x',0)
		.attr('y',margin.top)
		.attr("width", wsvg)
		.attr("height", height);

	// draw chr A and B as background
	svg.append('rect')
		.attr('x',margin.left)
		.attr('y',margin.top)
		.attr('width', chrWidth)
		.attr('height',chrHeight/pro)
		.style('stroke','#4C84B7')
		.style('fill','#5A9BD5');//#D7702A,#ED7C30
		
	svg.append('text')
        .attr('x',margin.left -25)
        .attr('y',margin.top +150)
        .attr('text-anchor','start')
        .html(data.A.name);

	svg.append('text')
		.attr('x',margin.left + 13 )
		.attr('y',margin.top -190)
		.attr('text-anchor','start')
		.html( data.A.seqType  + ":");

	svg.append('rect')
		.attr('x',margin.left + spaceBetweenChr)
		.attr('y',margin.top)
		.attr('width',chrWidth)
		.attr('height',chrHeight)
		.style('stroke','#4C84B7')
		.style('fill','#5A9BD5');

    svg.append('text')
        .attr('x',margin.left + 50 + spaceBetweenChr)
        .attr('y',margin.top +150)
        .attr('text-anchor','start')
        .html(data.B.name);

	svg.append('text')
		.attr('x',margin.left  + spaceBetweenChr +13)
		.attr('y',margin.top -190)
		.attr('text-anchor','start')
		.html(data.B.seqType +":");


  let subRectG = svg.append('g');

  var drawFunction = function(){



    let chrA_start = subRectG.selectAll('.start_a').data([data.A.min]);
	chrA_start.enter().append('text')
		.classed('start_a',true)
		.merge(chrA_start)
		.attr('x',margin.left + 13)
		.attr('y',margin.top - 20)
		.attr('text-anchor','end')
		.html(Math.floor(scalerA(100)));
	chrA_start.exit().remove();

    let chrA_end = subRectG.selectAll('.end_a').data([data.A.max]);
    chrA_end.enter().append('text')
        .classed('end_a',true)
		.merge(chrA_end)
        .attr('x',margin.left + 14)
        .attr('y',margin.top + chrHeight/pro + 20)
        .attr('text-anchor','start')
        .html(Math.floor(scalerA(750)));
    chrA_end.exit().remove();

	let chrB_start = subRectG.selectAll('.start_b').data([data.B.min]);
    chrB_start.enter().append('text')
        .classed('start_b',true)
        .merge(chrB_start)
        .attr('x',margin.left + 13 + spaceBetweenChr)
        .attr('y',margin.top - 20)
        .attr('text-anchor','end')
        .html(Math.floor(scalerB(100)));
    chrB_start.exit().remove();

    let chrB_end = subRectG.selectAll('.end_b').data([data.B.max]);
    chrB_end.enter().append('text')
        .classed('end_b',true)
        .merge(chrB_end)
        .attr('x',margin.left + 14 + spaceBetweenChr)
        .attr('y',margin.top + chrHeight + 20)
        .attr('text-anchor','start')
        .html(Math.floor(scalerB(750)));
    chrB_end.exit().remove();

	// draw
	let data_A = data.A.rect;
	let rect_A = subRectG.selectAll(".bar_a")
		.data(Object.keys(data_A));				// binding gene ID to selected .bar_a 

	rect_A.enter().append('rect')				// enter: select DOM base on data, then create them by append
		.classed('bar_a',true)
		.merge(rect_A)							// position for genes in chrA
		.attr('x',margin.left) 					// 100
		.attr('y',d=>(scale_A(data_A[d][1])-100)/pro+100)		// scale
		.attr('width',chrWidth)
		.attr('height',d=>(scale_A(data_A[d][2])-scale_A(data_A[d][1]))/pro)
		.append("title").text(d=>data.A.name + ":" + data_A[d][1] + "-" + data_A[d][2]);
	rect_A.exit().remove();						// exit: select DOM not in data, then remove them

	let data_B = data.B.rect;
	let rect_B = subRectG.selectAll(".bar_b")
		.data(Object.keys(data_B));


	rect_B.enter().append('rect')
		.classed('bar_b',true)
		.merge(rect_B)								// position for genes in chrB
		.attr('x',margin.left + spaceBetweenChr)	// 500
		.attr('y',d=>scale_B(data_B[d][1]) +
			((scale_B(data_B[d][2])-scale_B(data_B[d][1])) > 0 ? 0 : scale_B(data_B[d][2])-scale_B(data_B[d][1])) )	// scale
		.attr('width',chrWidth)
		.attr('height',d=>Math.abs(scale_B(data_B[d][2])-scale_B(data_B[d][1])))
		.append("title").text(d=>data.B.name + ":" + data_B[d][1] + "-" + data_B[d][2]);
	rect_B.exit().remove();



	// draw path for synteny 
	for (var i=0; i< relateD.length; i++) {
		let path = d3.path();

		let r = relateD[i];
		path.moveTo(r[0][0],(scale_A(r[0][1])-100)/pro+100);
	    path.lineTo(r[1][0],scale_B(r[1][1]));
	    path.lineTo(r[2][0],scale_B(r[2][1]));
	    path.lineTo(r[3][0],(scale_A(r[3][1])-100)/pro+100);
		path.closePath();

		var pathelement = subRectG.select('.synPath'+i);
		if (pathelement.empty()) pathelement = subRectG.append('a')
			.attr('href',"#hotspot" + index + (i+1))
			.append('path').classed('synPath', true)
			.on("mouseover", function() {
				d3.select(this).style('fill','grey').style("opacity",1.0);
			})
			.on("mouseout", function() {
				d3.select(this).style("fill","grey").style("opacity",0.5);
			});
		pathelement.attr('d', path.toString())
			.append("title").text(data.B.name + ":" + data_B[i][1] + "-" + data_B[i][2]  + "\nto\n" +
				data.A.name + ":" + data_A[i][1] + "-" + data_A[i][2]);
	}

  };

drawFunction();

}


